<template>
	<!-- 底部弹出 -->
	<gui-popup ref="guipopupRef" position="bottom" @close="closeChange">
		<view class="warp-popup">
			<view class="top_warp gui-flex gui-space-between gui-align-items-center">
				<view class="cel" @click="close">
					取消
				</view>
				<view class="title">
					残疾等级
				</view>
				<view class="corm" @click="close">
					确定
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll-Y" style="height: 500rpx;padding: 0 20rpx;box-sizing: border-box;">
				<checkbox-group @change="checkboxChange">
					<label class="gui-flex label_bai" v-for="item in items" :key="item.value">
						<view>
							<checkbox :value="item.dictValue" :checked="item.checked" />
						</view>
						<view class="ml20">{{item.dictLabel}}</view>
					</label>
				</checkbox-group>
			</scroll-view>
			<!-- iphone 底部适配 -->
			<gui-iphone-bottom :customClass="['gui-bg-white', 'gui-dark-bg-level-3']"></gui-iphone-bottom>
		</view>
	</gui-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject,
		defineEmits
	} from 'vue'
	const emit = defineEmits(['confirm'])
	const guipopupRef = ref(null);
	
	const checkVal = ref([])
	
	const props = defineProps({
		items: {
			type: Array,
			default: []
		}
	})

	const open = () => {
		guipopupRef.value.open();
	}
	
	const closeChange = () => {
		let formParam = JSON.stringify(checkVal.value)
		if(checkVal.value.length > 0) {
			emit('confirm',{
				data: JSON.parse(formParam)
			})
		}
	}

	const close = () => {
		guipopupRef.value.close();
	}
	
	const checkboxChange = (e) => {
		checkVal.value = e.detail.value;
	}
	
	/* const confirm = () => {
		emit('confirm',{
			data: checkVal.value
		})
	} */

	// 抛出函数
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	.top_warp {
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		
		.cel {
			color: #7f7f7f;
		}
		
		.corm {
			color: #27c36f;
		}
	}
	
	.title {
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		color: #333;
	}

	.warp-popup {
		width: 100%;
		height: 600rpx;
		background-color: #fff;
	}

	.label_bai {
		padding: 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #E6E6E6;
	}
	
	.ml20 {
		margin-left: 20rpx;
	}
</style>